import React, { useContext } from 'react';
import { Form, Input, Button, Radio, useState } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import { DesignRedux } from '../DesignRedux';

const Index = (param: any) => {
  const [form] = Form.useForm();

  // 在使用useContext解构出color中想要传递的值，就是最终返回给我们的值
  const { state } = useContext(DesignRedux);
  const { rightEleProperty } = state;

  form.setFieldsValue({
    ...rightEleProperty,
  });

  console.log('rightEleProperty', rightEleProperty);

  // TODO 动态修改各种属性
  return (
    <Form
      form={form}
      layout="vertical"
      initialValues={{
        id: 'xxxx',
      }}
      onFieldsChange={(_, allFields) => {
        console.log('====', _);
      }}
    >
      <Form.Item label="ID" name={'id'} tooltip="This is a required field">
        <Input placeholder="组件 id" />
      </Form.Item>
      {/*<Form.Item*/}
      {/*  label="标题"*/}
      {/*  tooltip={{*/}
      {/*    title: 'Tooltip with customize icon',*/}
      {/*    icon: <InfoCircleOutlined />,*/}
      {/*  }}*/}
      {/*>*/}
      {/*  <Input placeholder="input placeholder" />*/}
      {/*</Form.Item>*/}
      {/*<Form.Item*/}
      {/*  label="默认值"*/}
      {/*  tooltip={{*/}
      {/*    title: 'Tooltip with customize icon',*/}
      {/*    icon: <InfoCircleOutlined />,*/}
      {/*  }}*/}
      {/*>*/}
      {/*  <Input placeholder="input placeholder" />*/}
      {/*</Form.Item>*/}
    </Form>
  );
};

export default Index;
